<template>
  <div class="index-item">
    <!-- 上左 -->
    <div class="index-top clearfix">
      <div class="index-top-left fl" v-loading="leftTopLoading" element-loading-text="拼命加载中..."
           :style="indexItemTopLeftBg">
        <div id="allTrade"></div>
      </div>
      <!--上中-->
      <div class="index-top-middle fl" v-loading="middleTopLoading" element-loading-text="拼命加载中...">
        <ul class="radio-group clearfix">
          <li class="radio-button fl" v-for="(item,index) in totalNavList" @click="getTotalItem(item.title)"
              :class="{'is-active':item.isActive}">{{item.title}}
          </li>
        </ul>
        <div class="index-count">
          <div class="index-count-list">
            <h4>总领卡量</h4>
            <div>
              <span v-for="(item, index) in allCard.toString()" :class="item === ',' ? 'no-info' : 'info'">{{ item
                }}</span>
            </div>
          </div>
          <div class="index-count-list">
            <h4>总交易量</h4>
            <div>
                  <span v-for="(item, index) in allTrade.toString()"
                        :class="item === ',' ? 'no-info' : 'info'">
                  {{ item }}
                  </span>
            </div>
          </div>
        </div>
      </div>
      <!--上右-->
      <div class="index-top-right fr" v-loading="rightTopLoading" element-loading-text="拼命加载中..."
           :style="indexItemTopRight">
        <div id="userTotal"></div>
        <ul>
          <li v-for="(item, index) in userTotalArr" :key="index">
            <span :style="{backgroundColor: `${userTotalColor[index]}`}"></span>
            <em>{{ `${item.name} - ${(item.value / userTotalAllCount * 100).toFixed(2)}% - ${setNumberFormat(item.value)}`}}</em>
          </li>
        </ul>
      </div>
    </div>
    <!-- 下 -->
    <div class="index-bottom clearfix">
      <div class="index-bottom-left fl">
        <div class="bottom-left-top" v-loading="leftMiddleLoading" element-loading-text="拼命加载中..."
             :style="indexItemMiddleLeft">
          <div class="list-left fl">
            <div id="deviceLife"></div>
          </div>
          <div class="list-right fl">
            <ul>
              <li v-for="(item, index) in deviceLifeList" :key="index">
                <h4>{{ item.name }}</h4>
                <span :id="item.id"></span>
              </li>
            </ul>
          </div>
        </div>
        <!--左下-->
        <div class="bottom-left-bottom" v-loading="leftBottomLoading" element-loading-text="拼命加载中..."
             :style="indexItemBottomLeft">
          <div id="cardItem"></div>
          <ul class="radio-group clearfix">
            <li class="radio-button fl" v-for="(item,index) in cardItemList" @click="changeCardItem(item.title)" :class="{'is-active':item.isActive}">{{item.title}}
            </li>
          </ul>
        </div>
      </div>
      <div class="index-bottom-right fl clearfix" :style="indexMap">
        <div class="index-menu-btn">
          <div class="city-btn fl">
            <button class="btn"><i class="fa fa-bars"></i>&nbsp;{{cityName}}</button>
            <ul class="menu-city-list">
              <li class="city-info" v-for="(item,index) in indexRouterData">
                <router-link :to="{ name: 'indexItem', params: { code: item.modulePath }}">
                  {{ item.moduleName }}
                </router-link>
              </li>
            </ul>
          </div>
          <button class="btn" @click="$router.push('/cardData')">数据详情</button>
        </div>
        <!--地图-->
        <div id="mapInfo"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  import numberFormat from '../../../utils/numberFormat'

  export default {
    data () {
      return {
        totalRadio: '实时',
        cardRadio: '24h',
        checkCardItem: 1,
        totalCheck: 1,
        cityName: '全国',
        indexItemTopLeftBg: {
          background: 'url(' + require('../../../assets/img/tradeBg.png') + ')',
          backgroundSize: '100% 100%'
        },
        indexItemMiddleLeft: {
          background: 'url(' + require('../../../assets/img/deviceBg.png') + ')',
          backgroundSize: '100% 100%'
        },
        indexItemBottomLeft: {
          background: 'url(' + require('../../../assets/img/cardItemBg.png') + ')',
          backgroundSize: '100% 100%'
        },
        indexItemTopRight: {
          background: 'url(' + require('../../../assets/img/userTotalBg.png') + ')',
          backgroundSize: '100% 100%'
        },
        indexMap: {
          background: 'url(' + require('../../../assets/img/mapBg.png') + ')',
          backgroundSize: '100% 100%'
        }
      }
    },
    computed: {
      ...mapState('indexItem', [
        'leftTopLoading', // 左上
        'leftMiddleLoading', // 左中
        'leftBottomLoading', // 左下
        'middleTopLoading', // 中上
        'rightTopLoading', // 右上
        'allTrade', // 总交易量
        'deviceLifeList', // 设备情况
        'cardItemList', // 用户领卡趋势
        'totalNavList', // 总交易总领卡
        'allCard', // 总领卡量
        'userTotalArr', // 用户统计数据
        'userTotalAllCount', // 用户统计总数
        'userTotalColor' // 用户明细颜色值
      ]),
      ...mapState(['indexRouterData'])
    },
    mounted () {
      let cityCode = this.getCityCode()
      this.indexRouterData.forEach((v) => {
        if (v.modulePath === cityCode) {
          this.cityName = v.moduleName
        }
      })
      if (cityCode === '000000') {
        cityCode = null
      }
      let obj = {
        cityCode: cityCode
      }
      let cardItemObj = {
        cityCode: cityCode,
        id: this.checkCardItem
      }
      let totalObj = {
        cityCode: cityCode,
        id: this.totalCheck
      }
      this.getAllTrade(obj) // 左上
      this.getDeviceLife(obj) // 左中
      this.getCardItem(cardItemObj) // 左下
      this.getTotal(totalObj) // 中上
      this.getUserTotal(obj) // 右上
      this.setMap({data: this.indexRouterData}) // 地图
    },
    methods: {
      ...mapActions('indexItem', ['getAllTrade', 'getTotal', 'getCardItem', 'getDeviceLife', 'getUserTotal', 'setMap']),
      getCityCode () {
        let cityCode = this.$route.params.code
        let bool = true
        for (let i = 0; i < this.indexRouterData.length; i++) {
          if (cityCode === this.indexRouterData[i].modulePath) {
            bool = false
          }
        }
        if (bool) {
          this.$router.push('/login')
        }
        return cityCode
      },
      getTotalItem (val) { // 中上总统计切换
        this.totalNavList.forEach((v) => {
          v.isActive = false
          if (v.title === val) {
            v.isActive = true
            val = v.id
          }
        })
        let cityCode = this.getCityCode()
        if (cityCode === '000000') {
          cityCode = null
        }
        this.totalCheck = val
        let totalObj = {
          cityCode: cityCode,
          id: this.totalCheck
        }
        this.getTotal(totalObj) // 中上
      },
      changeCardItem (val) { // 领卡趋势切换
        this.cardItemList.forEach((v) => {
          v.isActive = false
          if (v.title === val) {
            v.isActive = true
            val = v.id
          }
        })
        let cityCode = this.getCityCode()
        if (cityCode === '000000') {
          cityCode = null
        }
        this.checkCardItem = val
        let cardItemObj = {
          cityCode: cityCode,
          id: this.checkCardItem
        }
        this.getCardItem(cardItemObj)
      },
      setNumberFormat (data) { // 数字金额格式化
        return numberFormat(data)
      }
    },
    beforeRouteUpdate (to, from, next) {
      next()
      let cityCode = this.getCityCode()
      this.indexRouterData.forEach((v) => {
        if (v.modulePath === cityCode) {
          this.cityName = v.moduleName
        }
      })
      if (cityCode === '000000') {
        cityCode = null
      }
      let obj = {
        cityCode: cityCode
      }
      let cardItemObj = {
        cityCode: cityCode,
        id: this.checkCardItem
      }

      let totalObj = {
        cityCode: cityCode,
        id: this.totalCheck
      }
      this.getAllTrade(obj) // 左上
      this.getDeviceLife(obj) // 左中
      this.getCardItem(cardItemObj) // 左下
      this.getUserTotal(obj) // 右上
      this.getTotal(totalObj) // 中上
      this.setMap({data: this.indexRouterData}) // 地图
    }
  }
</script>
